<template>
	<view class="snack-container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<input class="search-input" placeholder="搜索零食名称" v-model="searchValue" @confirm="handleSearch"
				placeholder-style="color: #999;" />
			<uni-icons type="search" size="20" color="#999" class="search-icon" @click="handleSearch"></uni-icons>
		</view>

		<!-- 价格分区导航 -->
		<scroll-view class="price-nav" scroll-x>
			<view v-for="(tab, index) in priceTabs" :key="index"
				:class="['price-tab', activePriceTab === index ? 'active' : '']" @click="changePriceTab(index)">
				<text class="price-label">{{tab.label}}</text>
				<text class="price-range">{{tab.range}}</text>
			</view>
		</scroll-view>

		<!-- 类别筛选栏 -->
		<view class="category-filter">
			<view class="filter-title">分类筛选：</view>
			<scroll-view class="filter-options" scroll-x>
				<view v-for="(category, index) in categories" :key="index"
					:class="['filter-option', activeCategory === index ? 'active' : '']" @click="changeCategory(index)">
					{{category.text}}
					<view class="option-indicator" v-if="activeCategory === index"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 视图切换按钮 -->
		<view class="view-toggle">
			<text :class="['view-icon', viewMode === 'list' ? 'active' : '']" @click="changeViewMode('list')">≡
				列表</text>
			<text :class="['view-icon', viewMode === 'grid' ? 'active' : '']" @click="changeViewMode('grid')">☷
				网格</text>
		</view>

		<!-- 加载状态 -->
		<uni-load-more v-if="loading" status="loading" iconType="circle" color="#4a8fe7"></uni-load-more>

		<!-- 列表视图 -->
		<view class="snack-list" v-if="viewMode === 'list' && !loading">
			<view class="snack-item" v-for="(item, index) in filteredSnacks" :key="item.id">
				<view class="item-badge" :class="'badge-' + item.categoryId">
					{{item.categoryName}}
				</view>
				<image class="snack-image" :src="getImageUrl(item.imageUrl)" mode="aspectFill"></image>
				<view class="snack-info">
					<text class="snack-name">{{item.name}}</text>
					<text class="snack-desc">{{item.description}}</text>
					<view class="snack-meta">
						<text class="snack-price">¥{{item.price.toFixed(2)}}</text>
						<text class="snack-status" :class="{'active': item.status, 'inactive': !item.status}">
							{{ item.status ? '在售' : '下架' }}
						</text>
					</view>
				</view>
				<view class="action-btns">
					<!-- <uni-icons type="compose" size="20" color="#4a8fe7" @click="editSnack(item.id)"></uni-icons> -->
					<uni-icons type="trash" size="20" color="#ff5a5f" @click="confirmDelete(item.id)"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 网格视图 -->
		<view class="snack-grid" v-if="viewMode === 'grid' && !loading">
			<view class="grid-item" v-for="(item, index) in filteredSnacks" :key="item.id">
				<view class="item-badge" :class="'badge-' + item.categoryId">
					{{item.categoryName}}
				</view>
				<image class="grid-image" :src="getImageUrl(item.imageUrl)" mode="aspectFill"></image>
				<view class="grid-info">
					<text class="grid-name">{{item.name}}</text>
					<view class="grid-meta">
						<text class="grid-price">¥{{item.price.toFixed(2)}}</text>
						<text class="">库存{{item.number}}件</text>
						<text class="grid-status" :class="{'active': item.status, 'inactive': !item.status}">
							{{ item.status ? '在售' : '下架' }}
						</text>
					</view>
				</view>
				<view class="grid-actions">
					<!-- <uni-icons type="compose" size="18" color="#4a8fe7" @click="editSnack(item.id)"></uni-icons> -->
					<uni-icons type="trash" size="18" color="#ff5a5f" @click="confirmDelete(item.id)"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 无商品提示 -->
		<view class="empty-tip" v-if="filteredSnacks.length === 0 && !loading">
			<image class="empty-icon" src="/static/empty-box.png" mode="aspectFit"></image>
			<text class="empty-text">当前分类暂无零食</text>
			<button class="add-btn" @click="addSnack">添加零食</button>
		</view>

		<!-- 添加按钮 -->
		<view class="floating-btn" @click="addSnack">
			<uni-icons type="plusempty" size="28" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				searchValue: '',
				viewMode: 'grid', // 'list' 或 'grid'
				activePriceTab: 0,
				activeCategory: 0,
				loading: false,
				priceTabs: [{
						label: '全部',
						range: '所有价格',
						min: 0,
						max: 100
					},
					{
						label: '0.1元',
						range: '平价零食',
						min: 0,
						max: 0.1
					},
					{
						label: '0.5元',
						range: '中档零食',
						min: 0.5,
						max: 0.5
					},
					{
						label: '1元',
						range: '高档零食',
						min: 1,
						max: 1
					},
					{
						label: '1元之上',
						range: '至尊零食',
						min: 1.1,
						max: 100
					}
				],
				categories: [{
						value: 0,
						text: '全部'
					},
					{
						value: 1,
						text: '膨化食品'
					},
					{
						value: 2,
						text: '糖果巧克力'
					},
					{
						value: 3,
						text: '饮料'
					},
					{
						value: 4,
						text: '饼干糕点'
					}
				],
				snacks: []
			}
		},
		computed: {
			filteredSnacks() {
				let result = this.snacks;

				// 搜索过滤
				if (this.searchValue) {
					result = result.filter(item =>
						item.name.toLowerCase().includes(this.searchValue.toLowerCase())
					);
				}

				// 价格过滤
				const priceTab = this.priceTabs[this.activePriceTab];
				if (this.activePriceTab !== 0) {
					result = result.filter(item =>
						item.price >= priceTab.min && item.price <= priceTab.max
					);
				}

				// 分类过滤
				if (this.activeCategory !== 0) {
					const categoryValue = this.categories[this.activeCategory].value;
					result = result.filter(item => item.categoryId === categoryValue);
				}

				return result;
			}
		},
		onLoad() {
			this.fetchSnacks();
		},
		onShow() {
			this.fetchSnacks();
		},
		methods: {
			getImageUrl(url) {
				if (!url) return '/static/aver1.jpg';
				if (url.startsWith('http')) return url;
				return `${globalVariable}/getSnackImage/${url}`;
			},
			async fetchSnacks() {
				this.loading = true;
				try {
					const res = await uni.request({
						url: `${globalVariable}/getAllSnacks`,
						method: 'GET'
					});
					
					if (res.data && res.data.status === 1) {
						this.snacks = res.data.data;
					} else {
						uni.showToast({
							title: res.data.message || '获取零食列表失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取零食列表失败:', error);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			handleSearch() {
				// 搜索逻辑已在计算属性中处理
			},
			changePriceTab(index) {
				this.activePriceTab = index;
			},
			changeCategory(index) {
				this.activeCategory = index;
			},
			changeViewMode(mode) {
				this.viewMode = mode;
			},
			addSnack() {
				uni.navigateTo({
					url: '/pages/snakeAdd/snakeAdd'
				});
			},
			editSnack(id) {
				uni.navigateTo({
					url: `/pages/snakeEdit/snakeEdit?id=${id}`
				});
			},
			confirmDelete(id) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个零食吗？',
					success: (res) => {
						if (res.confirm) {
							this.deleteSnack(id);
						}
					}
				});
			},
			async deleteSnack(id) {
				try {
					const res = await uni.request({
						url: `${globalVariable}/deleteSnack?id=${id}`,
						method: 'DELETE'
					});
					
					if (res.data && res.data.status === 1) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.fetchSnacks(); // 刷新列表
					} else {
						uni.showToast({
							title: res[1].data.message || '删除失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('删除失败:', error);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.snack-container {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 搜索栏 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 50rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.search-icon {
		margin-left: 10rpx;
	}

	/* 价格导航 */
	.price-nav {
		white-space: nowrap;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
	}

	.price-tab {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 30rpx;
		margin-right: 15rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		min-width: 120rpx;
	}

	.price-tab.active {
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		color: #fff;
	}

	.price-label {
		font-size: 28rpx;
		font-weight: bold;
	}

	.price-range {
		font-size: 22rpx;
		opacity: 0.8;
	}

	.price-tab.active .price-range {
		opacity: 0.9;
	}

	/* 类别筛选栏 */
	.category-filter {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 15rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.filter-title {
		font-size: 26rpx;
		color: #666;
		padding: 0 20rpx;
		white-space: nowrap;
	}

	.filter-options {
		flex: 1;
		white-space: nowrap;
	}

	.filter-option {
		display: inline-block;
		padding: 12rpx 25rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
		color: #666;
		position: relative;
	}

	.filter-option.active {
		color: #4a8fe7;
		font-weight: bold;
	}

	.option-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #4a8fe7;
		border-radius: 2rpx;
	}

	/* 视图切换按钮 */
	.view-toggle {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20rpx;
	}

	.view-icon {
		padding: 8rpx 20rpx;
		font-size: 28rpx;
		color: #999;
		margin-left: 15rpx;
		border-radius: 30rpx;
		background-color: #f5f5f5;
	}

	.view-icon.active {
		background-color: #4a8fe7;
		color: #fff;
	}

	/* 商品标签 */
	.item-badge {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 4rpx 12rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		z-index: 2;
		color: #fff;
	}

	.badge-1 {
		background-color: #ff7675;
		/* 膨化食品 */
	}

	.badge-2 {
		background-color: #74b9ff;
		/* 糖果巧克力 */
	}

	.badge-3 {
		background-color: #55efc4;
		/* 饮料 */
	}

	.badge-4 {
		background-color: #a29bfe;
		/* 饼干糕点 */
	}

	/* 列表视图样式 */
	.snack-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.snack-item {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.snack-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
	}

	.snack-info {
		flex: 1;
	}

	.snack-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.snack-desc {
		font-size: 26rpx;
		color: #999;
		display: block;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.snack-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.snack-price {
		font-size: 30rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.snack-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;

		&.active {
			background-color: #e6f7e6;
			color: #52c41a;
		}

		&.inactive {
			background-color: #fff1f0;
			color: #ff4d4f;
		}
	}

	.action-btns {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 10rpx 0;
	}

	/* 网格视图样式 */
	.snack-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.grid-item {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		position: relative;
	}

	.grid-image {
		width: 100%;
		height: 200rpx;
		border-radius: 12rpx;
		background-color: #f5f5f5;
		margin-bottom: 15rpx;
	}

	.grid-info {
		width: 100%;
		margin-bottom: 15rpx;
	}

	.grid-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.grid-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.grid-price {
		font-size: 28rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.grid-status {
		font-size: 22rpx;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;

		&.active {
			background-color: #e6f7e6;
			color: #52c41a;
		}

		&.inactive {
			background-color: #fff1f0;
			color: #ff4d4f;
		}
	}

	.grid-actions {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		border-top: 1rpx dashed #eee;
	}

	/* 无商品提示 */
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.add-btn {
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		color: white;
		border: none;
		border-radius: 40rpx;
		padding: 0 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 12rpx rgba(74, 143, 231, 0.3);
	}

	/* 添加按钮 */
	.floating-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 20rpx rgba(74, 143, 231, 0.4);
		z-index: 100;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}

	@media (min-width: 768px) {
		.snack-container {
			padding: 30rpx;
			max-width: 1200rpx;
			margin: 0 auto;
		}

		.snack-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>